<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catalog-Z Bootstrap 5.0 HTML Template</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css" charset="utf-8">
    <script src="js/getParameter.js"></script>

</head>
<body>
<script src="js/plugins.js"></script>
<script>
    $(window).on("load", function () {
        $('body').addClass('loaded');
        /*头部*/
        $.get("header.html", function (data) {
            $("#header").html(data);
        });
        /*尾部*/
        $.get("footer.html", function (data) {
            $("#footer").html(data);
        });
        /*根据cid分类查询*/
        var cid = getParameter("cid");
        load(cid);
    });

    function load(cid, currentPage) {
        $.get("/photograph/CategoryServlet/queryPage",
            {cid: cid, currentPage: currentPage},
            function (data) {
                $("#currentPage").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                $photoList = $("#img_loader");
                var list = '';
                for (var i = 0; i < data.list.length; i++) {
                    var li = '  <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="' + data.list[i].isrc + '" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>' + data.list[i].iname + '</h2>\n' +
                        '                   <a onclick="reading(' + data.list[i].iid + ')" href="photo-detail.html?iid=' + data.list[i].iid + '">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">' + data.list[i].idate + '</span>\n' +
                        '                <span>' + data.list[i].iclick + ' views</span>   \n' +
                        '            </div>\n' +
                        '        </div>'
                    list += li;
                }
                $photoList.html(list);

                var start = data.currentPage - 5;
                var end = data.currentPage + 4;
                if (start < 1) { // 前面不足5个
                    start = 1;
                    end = 10;
                }
                if (end > data.totalPage) { // 后面不足4个
                    end = data.totalPage;
                    start = end - 9;
                }
                if (data.totalPage < 10) { // 总页数不足10个
                    start = 1;
                    end = data.totalPage;
                }

                $pageIndex = $("#pageIndex");
                var pageList = '';
                var prePage = data.currentPage - 1;
                if (prePage < 1) {
                    prePage = 1;
                }
                //上一页
                pageList += '<div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">\n' +
                    '            <a href="javascript:load(' + cid + ', ' + prePage + ');" class="btn btn-primary tm-btn-prev ">Previous</a>'
                //当前页
                pageList += ' <div class="tm-paging d-flex">'
                for (var i = start; i <= end; i++) {
                    if (i == data.currentPage) {

                        pageList += ' <a href="javascript:load(' + cid + ', ' + i + ');" class="active tm-paging-link">' + i + '</a>'

                    } else {
                        pageList += ' <a href="javascript:load(' + cid + ', ' + i + ');" class=" tm-paging-link">' + i + '</a>'

                    }
                }
                pageList += '</div>'
                //下一页
                var nextPage = data.currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage;
                }
                pageList += '       <a href="javascript:load(' + cid + ', ' + nextPage + ');" class="btn btn-primary tm-btn-next">Next Page</a>\n' +
                    '        </div>';
                $pageIndex.html(pageList);
            }, "json")
    }

    //点击量
    function reading(iid) {
        $.post("/photograph/read/reading", {iid: iid}, function (data) {

        }, "json")
    }
</script>
<!--头部-->
<div id="header"></div>
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<div class="container-fluid tm-container-content tm-mt-60">
    <div class="row mb-4">
        <h2 class="col-6 tm-text-primary" id="searchImg">
            Photos
        </h2>
        <div class="col-6 d-flex justify-content-end align-items-center">
            <form action="" class="tm-text-primary">
                Page <SPAN  value="1" size="1"  id="currentPage"></SPAN> of <span id="totalPageSpan"></span>
            </form>
        </div>
    </div>
    <!--照片部分-->
    <div class="row tm-mb-90 tm-gallery" id="img_loader">
        <!-- <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-03.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Clocks</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">18 Oct 2020</span>
                 <span>9,906 views</span>
             </div>
         </div>

         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-04.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Plants</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">14 Oct 2020</span>
                 <span>16,100 views</span>
             </div>
         </div>

         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-05.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Morning</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">12 Oct 2020</span>
                 <span>12,460 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-06.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Pinky</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">10 Oct 2020</span>
                 <span>11,402 views</span>
             </div>
         </div>

         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-01.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Hangers</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">24 Sep 2020</span>
                 <span>16,008 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-02.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Perfumes</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">20 Sep 2020</span>
                 <span>12,860 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-07.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Bus</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">16 Sep 2020</span>
                 <span>10,900 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-08.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>New York</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">12 Sep 2020</span>
                 <span>11,300 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-09.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Abstract</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">10 Sep 2020</span>
                 <span>42,700 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-10.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Flowers</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">8 Sep 2020</span>
                 <span>11,402 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-11.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Rosy</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">4 Sep 2020</span>
                 <span>32,906 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-12.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Rocki</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">28 Aug 2020</span>
                 <span>50,700 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-13.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Purple</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">22 Aug 2020</span>
                 <span>107,510 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-14.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Sea</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">14 Aug 2020</span>
                 <span>118,006 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-15.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Turtle</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">9 Aug 2020</span>
                 <span>121,300 views</span>
             </div>
         </div>
         <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">
             <figure class="effect-ming tm-video-item">
                 <img src="img/img-16.jpg" alt="Image" class="img-fluid">
                 <figcaption class="d-flex align-items-center justify-content-center">
                     <h2>Peace</h2>
                     <a href="photo-detail.html">View more</a>
                 </figcaption>
             </figure>
             <div class="d-flex justify-content-between tm-text-gray">
                 <span class="tm-text-gray-light">3 Aug 2020</span>
                 <span>21,204 views</span>
             </div>
         </div>-->
    </div>

    <!-- row -->
    <div class="row tm-mb-90" id="pageIndex">
        <div class="col-12 d-flex justify-content-between align-items-center tm-paging-col">
            <a href="javascript:void(0);" class="btn btn-primary tm-btn-prev mb-2 disabled">Previous</a>
            <div class="tm-paging d-flex">
                <a href="javascript:void(0);" class="active tm-paging-link">1</a>
                <a href="javascript:void(0);" class="tm-paging-link">2</a>
                <a href="javascript:void(0);" class="tm-paging-link">3</a>
                <a href="javascript:void(0);" class="tm-paging-link">4</a>
            </div>
            <a href="javascript:void(0);" class="btn btn-primary tm-btn-next">Next Page</a>
        </div>
    </div>

</div>

<!--尾部-->
<footer id="footer"></footer>


</body>
</html>